<template>
	<view>
		<view class="addmoney_banner">
			<image src="../../static/images/pic3.png" mode="widthFix"></image>
		</view>

		<view class="wp">
			<view class="shu_title">
				<view class="span"></view>
				<text>选择存入金额</text>
			</view>
			<view class="money_list">
				<view class="item" v-if="logintype==2">
					<view class="con" :class="chose_fee==2000&&pay_fee==''?'on':''" @click="ChangeFee(2000)">2000
						<text>元</text>
					</view>
				</view>
				<view class="item">
					<view class="con" :class="chose_fee==10000&&pay_fee==''?'on':''" @click="ChangeFee(10000)">10000
						<text>元</text>
					</view>
				</view>


				<view class="item" v-if="logintype==1">
					<view class="con" :class="chose_fee==20000&&pay_fee==''?'on':''" @click="ChangeFee(20000)">20000
						<text>元</text>
					</view>
				</view>

			</view>
			<view class="chose_moeny">
				<input type="number" @input="PayFee" v-model="pay_fee" placeholder="请输入自定义金额" />

				<text class="dw">万元</text>
			</view>

			<view class="info">
				<view class="shu_title">
					<view class="span"></view>
					<text>详细信息</text>
				</view>
				<view class="h"></view>
				<view class="info_con">
					<!-- 普通用户 -->
					<view class="top" v-if="logintype==2">
						<view class="li">
							<view class="span">存入金额（元）</view>
							<view class="b">{{endfee}}</view>
						</view>
						<view class="li">
							<view class="span">年化收益率</view>
							<view class="b" v-if="endfee==2000">{{config.min_rate*100}}%</view>
							<view class="b" v-else>{{config.max_rate*100}}%</view>
						</view>
						<view class="li">
							<view class="span">预计收益（元）</view>
							<view class="b" v-if="endfee==2000">{{config.min_rate*endfee}}</view>
							<view class="b" v-else>{{config.max_rate*endfee}}</view>
						</view>
					</view>

					<!-- 商户用户 -->
					<view class="top" v-if="logintype==1">
						<view class="li">
							<view class="span">存入金额（元）</view>
							<view class="b">{{endfee}}</view>
						</view>
						<view class="li">
							<view class="span">年化收益率</view>
							<view class="b">{{config.merchant_rate*100}}%</view>
						</view>
						<view class="li">
							<view class="span">预计收益（元）</view>
							<view class="b">{{config.merchant_rate*endfee}}</view>
						</view>
					</view>

					<view class="bottom">
						<view class="li">
							<view class="span">{{endfee}}</view>
							<view class="b">积分</view>
						</view>
						<view class="li">
							<view class="span">{{common.getNextDate(0)}}</view>
							<view class="b">生效日期</view>
						</view>
						<view class="li">
							<view class="span">{{common.getDateOneYearLessOneDay()}}</view>
							<view class="b">到期日期</view>
						</view>
					</view>
				</view>
			</view>

			<!-- {{config}} -->

			<!-- <view class="pay_mode">
				<view class="shu_title">
					<view class="span"></view>
					<text>选择支付方式</text>
				</view>

				<view class="pay">
					<view class="w_change">
						<view class="apply_item chose_item" :class="pay_type=='wechat'?'on':''"
							@click="pay_type='wechat'">
							<view class="left">
								<image mode="widthFix" src="../../static/images/pay1.png"></image>
								<text class="span">微信支付</text>
							</view>
						</view>
						<view class="apply_item chose_item" :class="pay_type=='offline'?'on':''"
							@click="pay_type='offline'">
							<view class="left">
								<image mode="widthFix" src="../../static/images/pay2.png"></image>
								<text class="span">线下支付</text>
							</view>
						</view>
						<view v-if="info.balance>=endfee" class="apply_item chose_item"
							:class="pay_type=='balance'?'on':''" @click="pay_type='balance'">
							<view class="left">
								<image mode="widthFix" src="../../static/images/pay3.png"></image>
								<text class="span">余额支付</text>
							</view>
						</view>
					</view>
				</view>

			</view> -->
			<view class="h"></view>

			<view class="web_food_btn">
				<view class="btn_text">
					<view class="p">应付：<text>{{endfee}}</text></view>
					<view class="span" @click="ispop=true">去付款</view>
				</view>
			</view>
		</view>


		<view id="fen_pop" v-if="ispop">
			<view class="bg" @click="ispop=false"></view>
			<view class="con">
				<view class="item" @click="GoPay('wechat')">
					<view class="pic">
						<image mode="widthFix" src="../../static/images/pay1.png"></image>
						<text>微信支付</text>
					</view>
				</view>
				<!-- :class="pay_type=='offline'?'on':''" -->
				<view class="item"  @click="GoPay('offline')">
					<view class="pic">
						<image mode="widthFix" src="../../static/images/pay2.png"></image>
						<text>线下支付</text>
					</view>
				</view>
				<view class="item" v-if="info.balance>=endfee"  @click="GoPay('balance')">
					<view class="pic">
						<image mode="widthFix" src="../../static/images/pay3.png"></image>
						<text>余额支付</text>
					</view>
				</view>
				<view class="item item2" @click="ispop=false">
					<text>取消</text>
				</view>
			</view>
		</view>


	</view>



</template>

<script>
	export default {
		data() {
			return {
				info: [],
				config: [],
				pay_fee: '', //输入的支付金额
				chose_fee: '2000', //输入的支付金额
				endfee: 2000, // 最终支付金额
				pay_type: 'wechat',
				logintype: 0,
				ispop: false,
			}
		},
		onLoad() {
			let that = this;
			if (that.common.GetStorage('byh5token')) {
				that.logintype = that.common.GetStorage('byh5type');
				
				if(that.logintype==1){
					that.chose_fee = 10000;
					that.endfee = 10000;
				}
				
				that.GetUserMass();
			} else {
				uni.reLaunch({
					url: '/pages/login/login',
				})
			}
		},
		methods: {
			GoPay: function(txt) {
				let that = this;
				that.pay_type = txt;
				
				if(that.endfee<1){
					uni.showToast({
						icon: 'none',
						title: '金额不能小于1万',
						duration: 2000
					});
					return false;
				}
				if(that.endfee>10000&&(that.endfee/10000).toString().indexOf('.')>-1){
					uni.showToast({
						icon: 'none',
						title: '金额不能为小数',
						duration: 2000
					});
					return false;
				}	
				
				var _data = {
					pay_type: txt,
					pay_fee: that.endfee,
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				that.common.http('POST', 'user/pay', _data, function(res) {
					uni.hideLoading();

					if (that.pay_type == 'offline') {
						uni.showToast({
							icon: 'none',
							title: '申请已提交,完成线下付款后生效',
							duration: 2000
						});
						setTimeout(function() {
							that.navigateBack();
						}, 1500);
					} else if (that.pay_type == 'wechat') {
						console.log(res.data);

						that.WeiXinPay(res.data);

					} else {
						uni.showToast({
							icon: 'none',
							title: '支付成功',
							duration: 2000
						});
						setTimeout(function() {
							that.navigateBack();
						}, 1500);
					}
				});
			},


			//微信支付
			WeiXinPay: function(item) {
				let that = this;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": item.appId,
						"timeStamp": item.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": item.nonceStr, //随机串     
						"package": item.package,
						"signType": "MD5",
						"paySign": item.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								icon: 'none',
								title: '支付成功!',
								duration: 2000
							});
							setTimeout(function() {
								that.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败!',
								duration: 2000
							});
							setTimeout(function() {
								that.navigateBack();
							}, 1500);
						}
					});
			},


			GetUserMass: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'user', '', function(res) {
					that.info = res.data;
					that.GetConfig();
				});
			},
			GetConfig: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'config', '', function(res) {
					uni.hideLoading();
					that.config = res.data;
				});
			},


			ChangeFee(num) {
				let that = this;
				that.chose_fee = num;
				that.endfee = num;
				that.pay_fee = '';
			},
			PayFee: function() {
				let that = this;
				if (that.pay_fee == '') {
					that.endfee = that.chose_fee;
				} else {
					that.endfee = that.pay_fee * 10000;
				}
			},

			navigateBack() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {}
				return;
				// #endif
				uni.navigateBack();
			},


		}
	}
</script>

<style scoped>
	.addmoney_banner {
		background: linear-gradient(to bottom, #2571eb, #2571eb, #2571eb);
		padding: 0 60rpx;
		padding-bottom: 90rpx;
	}

	.addmoney_banner image {
		width: 100%;
		vertical-align: middle;
	}

	.wp {
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		margin-top: -40rpx;
		overflow: hidden;
		background-color: #f7f7f7;
	}


	.info {
		margin-top: 30rpx;
	}

	.info_con {
		padding: 26rpx;
		background-color: #fff;
		border-radius: 8px;
	}

	.info .top {
		padding: 0 26rpx;
		height: 136rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f2f7ff;
		border-radius: 8px;
	}

	.info .top .span {
		font-size: 22rpx;
		color: #999;
	}

	.info .top .b {
		font-size: 38rpx;
		color: #333;
		margin-top: 12rpx;
		font-weight: bold;
	}


	.info .bottom {
		padding: 0 26rpx;
		text-align: center;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.info .bottom .span {
		font-size: 28rpx;
		color: #333;
	}

	.info .bottom .b {
		font-size: 24rpx;
		color: #999;
		margin-top: 12rpx;
	}

	.chose_moeny {
		position: relative;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 8px;
		padding: 20rpx;
		padding-right: 120rpx;
	}

	.chose_moeny .dw {
		position: absolute;
		right: 0rpx;
		font-size: 24rpx;
		color: #000;
		width: 102rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.chose_moeny picker {
		width: 100%;
		height: 64rpx;
		line-height: 62rpx;
		border: 1px solid #e9ebf0;
		border-radius: 8px;
		color: #333;
		padding: 0 20rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.chose_moeny input {
		width: 100%;
		height: 64rpx;
		line-height: 62rpx;
		border: 1px solid #e9ebf0;
		border-radius: 8px;
		color: #333;
		padding: 0 20rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.wp {
		padding-top: 30rpx;
	}

	.money_list {
		margin-left: -20rpx;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.money_list .item {
		width: 50%;
		padding-left: 20rpx;
		float: left;
	}

	.money_list .item .con {
		background-color: #fff;
		border-radius: 8px;
		text-align: center;
		height: 100rpx;
		line-height: 96rpx;
		border: 1px solid #fff;
		font-size: 38rpx;
		color: #000;
	}

	.money_list .item .con.on {
		background-color: #ebf2ff;
		border: 1px solid #227fff;
	}

	.money_list .item .con text {
		font-size: 26rpx;
	}

	.pay_mode {
		margin-top: 30rpx;
	}

	.pay {
		margin-top: 30rpx;
	}

	.pay .w_change {
		background-color: #fff;
		padding: 10rpx 26rpx;
		border-radius: 8px;
	}

	.pay .w_change h3 {
		font-size: 32rpx;
		color: #000;
	}



	.w_change .apply_item {
		overflow: hidden;
		position: relative;
		height: 70rpx;
		margin: 20rpx 0;
	}

	.w_change .apply_item .left {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.w_change .apply_item image {
		width: 44rpx;
		vertical-align: middle;
		margin-right: 6px;
	}

	.w_change .apply_item .span {
		font-size: 11pt;
		color: #333;
		vertical-align: middle;
		margin-right: 6px;
	}


	.w_change .chose_item {
		background-image: url(@/static/images/my16.png);
		background-size: 18px;
		background-repeat: no-repeat;
		background-position: right center;
	}

	.w_change .chose_item.on {
		background-image: url('@/static/images/c_i11.png');
	}
</style>